<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title></title>
		<!-- Mobile specific metas  -->
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- CSS Style -->
		<link rel="stylesheet" href="css/stylesheet.css">
		<script src="js/holder.js"></script>
		<style type="text/css">
			.commentHeader{
				margin-top: 20px;
				font-size: 16px;
				width:100%;
				height: 50px;
				padding-top: 18px;
				padding-bottom: 15px;
				padding-left: 10px;
				border-top: 1px solid #ddd;
				border-bottom: 1px solid #ddd;
			}
			
			.commentBody{
				width: 100%;
				min-height: 300px;
			}
			
			.commentItem{
				margin-top: 10px;
				padding: 5px 5px 5px 20px;
				font-size: 14px;
				height: 30px;
				width: 100%;
				border-bottom: 1px dashed #ddd;
				line-height:20px;
			}
			
			.info-orther p {
				margin-top: 15px;
			
			
			
			}
		
		</style>
	</head>

	<body class="single-product-page">

		<!-- mobile menu -->
		<div id="page">

			<!-- Header -->
			<header>
				<div class="header-container">
					<div class="header-top">
						<div class="container">
						</div>
					</div>
					<div class="container">
						<div class="row">
							<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
								<!-- Header Logo -->
								<div class="logo" style="width: 150;height: 90;">
									<h1><a title="缘酒网" href="home"><img class="img-responsive" alt="缘酒网" src="images/logo.png"> </a></h1> </div>
								<!-- End Header Logo -->
							</div>
							<div class="col-lg-6 col-md-4 col-sm-4 col-xs-12 jtv-logo-box">
								
							</div>
							<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 hidden-xs">
								<div class="search-box">
									<form style="margin: 0px;" action="shop_grids" method="POST" id="search_mini_form" name="Categories">
										<input type="text" placeholder="输入关键词" maxlength="70" name="keyWord" id="search" value="${productVo.keyWord}">
										<button type="button" class="search-btn-bg" onclick="search_mini_form.submit();"><span class="glyphicon glyphicon-search"></span></button>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</header>
			<!-- end header -->

			<!-- Navigation -->

			<nav>
				<div class="container">
					<div class="mm-toggle-wrap">
						<div class="mm-toggle"><i class="fa fa-align-justify"></i><span class="mm-label">Menu</span> </div>
					</div>
					<div class="nav-inner">
												<!-- BEGIN NAV -->
						<ul id="nav" class="hidden-xs">
							<li class="drop-menu">
								<a href="home" class="level-top active"><span>首页</span></a>
							</li>
							<c:forEach items="${categoryList}" var="catItem">
								<li class="mega-menu">
								<a class="level-top" href="shop_grids?cid=${catItem.id}"><span>${catItem.cat}</span></a>
								</li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</nav>
			<!-- end nav -->

			<!-- Breadcrumbs -->
			<div class="breadcrumbs">
				<div class="container">
					<div class="row">
						<div class="col-xs-12">
							<ul>
								<li class="home">
									<a href="home">首页</a> <span>/</span> </li>
								<li>
									<a href="shop_grids?cid=${productVo.cid}">${productVo.category}</a><span>/</span></li>
								<li>
									<a href="shop_grids?brand=${productVo.brand}">${productVo.brandName}</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- Breadcrumbs End -->

			<!-- Main Container -->
			<section class="main-container col1-layout">
				<div class="main">
					<div class="container">
						<div class="row">
							<div class="col-main">
								<div class="product-view">
									<div class="product-essential">
										<form action="#" method="post" id="product">
											<div class="product-img-box col-lg-4 col-sm-5 col-xs-12">
												<div class="new-label new-top-left"> New </div>
												<div class="product-image">
													<div class="product-full"> <img id="product-zoom" src="${imgList[0]}" data-zoom-image="${imgList[0]}" alt="图片暂时无法显示" style="height:350px;"> </div>
													<div class="more-views">
														<div class="slider-items-products">
															<div id="gallery_01" class="product-flexslider hidden-buttons product-img-thumb">
																<div class="slider-items slider-width-col4 block-content">
																	<c:forEach items="${imgList}" var="imgNow">
																		<div class="more-views-items">
																			<a href="#" data-image="${imgNow}" data-zoom-image="${imgNow}"> <img id="product-zoom" src="${imgNow}" alt="图片暂时无法显示"> </a>
																		</div>
																	</c:forEach>
																</div>
															</div>
														</div>
													</div>
												</div>
												<!-- end: more-images -->
											</div>
											<div class="product-shop col-lg-8 col-sm-7 col-xs-12" style="float:right;padding-left:150px;">

												<div class="product-name">
													<h4>${jiuObject.title}</h4>
												</div>

												<div class="price-block" style="margin-top: 30px;">
													<div class="price-box">
														<font>售价</font>
														<c:if test="${jiuObject.valueSuggest != jiuObject.valueSell}">
															<p class="special-price"> <span class="price-label">Special Price</span> <span id="product-price-48" class="price" style="color:red !important;">￥${jiuObject.valueSell}</span> </p>
															<p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price">￥${jiuObject.valueSuggest}</span> </p>
														</c:if>
														<c:if test="${jiuObject.valueSuggest == jiuObject.valueSell}">
															<p class="special-price"> <span class="price-label">Special Price</span> <span id="product-price-48" class="price" style="color:red !important;">￥${jiuObject.valueSell}</span> </p>
														</c:if>
													</div>
												</div>
												<div class="info-orther">
													<c:if test="${not empty jiuObject.gno}">
														<p>商品编号: ${jiuObject.gno}</p>
													</c:if>
													<c:if test="${not empty jiuObject.storage}">
														<p>库存: ${jiuObject.storage}</p>
													</c:if>
													<c:if test="${not empty jiuObject.flavor}">
														<p>香型: ${jiuObject.flavor}</p>
													</c:if>
													<c:if test="${not empty jiuObject.produce}">
														<p>产地: ${jiuObject.produce}</p>
													</c:if>
													<c:if test="${not empty jiuObject.degree}">
														<p>酒精度: ${jiuObject.degree}</p>
													</c:if>
													<c:if test="${not empty jiuObject.net}">
														<p>净含量: ${jiuObject.net}</p>
													</c:if>
													<c:if test="${not empty jiuObject.webCode}">
														<c:if test="${jiuObject.webCode =='1'}">
															<p>来源: 酒仙</p>
														</c:if>
														<c:if test="${jiuObject.webCode =='2'}">
															<p>来源: 1919</p>
														</c:if>
													</c:if>
													<c:if test="${not empty jiuObject.url}">
														<p>购买链接: ${jiuObject.url}</p>
													</c:if>
													<c:if test="${not empty jiuObject.grabtime}">
														<p>抓取时间: ${jiuObject.grabtime}</p>
													</c:if>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
							<div class="product-collateral col-lg-12 col-sm-12 col-xs-12">
								<div class="add_info">
									<div class="commentHeader">
										商品评论
									</div>
									<div  class="commentBody">
									
									<c:choose>
										<c:when test="${empty commentList}">
											<div style="margin-left:45%;margin-top:200px;font-size:16px;color:#ccc !important;">
												暂无评论
											</div>
										</c:when>
										<c:otherwise>
											<c:forEach items="${commentList}" var="commentItem">
												<div class="commentItem">
													<div style="float:left;">
														网友： ${commentItem.com}
													</div>
													<div style="float:right;padding-right:30px;">
														${commentItem.commentTime}
													</div>
												</div>
											</c:forEach>										
										</c:otherwise>
									</c:choose>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- Main Container End -->
			
			<!-- Footer -->
			<!-- Footer -->
			<footer style="height:50px;padding-top:10px;text-align:center;">
				<div class="footer-word">
					©缘酒网							
				</div>
			</footer>
		</div>

		<!-- End Footer -->

		<!-- jquery js -->
		<script type="text/javascript" src="js/jquery.min.js"></script>

		<!-- bootstrap js -->
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

		<!-- owl.carousel.min js -->
		<script type="text/javascript" src="js/owl.carousel.min.js"></script>

		<!-- jtv-jtv-mobile-menu js -->
		<script type="text/javascript" src="js/jtv-mobile-menu.js"></script>

		<!-- countdown js -->
		<script type="text/javascript" src="js/countdown.js"></script>

		<!-- main js -->
		<script type="text/javascript" src="js/main.js"></script>

		<!-- cloud zoom js -->
		<script type="text/javascript" src="js/cloud-zoom.js"></script>

	</body>

</html>